<template>
  <div class="pcenter-page">
    <div class="user-info-accumulate" v-if="edit">
      <el-card class="form-card">
        <template #header>
          <div class="card-header">
            <span>{{ $t('pcenter.accumulate.title') }}</span>
            <div>
              <el-button v-if="portraitInfo.area" link type="primary" @click="handleCancelEditPortrait">取消</el-button>
              <el-button type="primary" @click="handleSaveAccumulate" :disabled="saveDisabled" :loading="saveAccumulateLoading">提交</el-button>
            </div>
          </div>
        </template>
        <div class="info-row">
          <span class="label">{{ $t('pcenter.accumulate.fromLabel') }}：</span>
          <el-select class="select" v-model="infoForm.from">
            <el-option v-for="item in provinces" :key="item" :value="item">{{ item }}</el-option>
          </el-select>
        </div>
        <el-divider/>
        <div class="info-row">
          <span class="label">{{ $t('pcenter.accumulate.ageLabel') }}：</span>
          <el-radio-group v-model="infoForm.age">
            <el-radio value="24岁以下" size="large">24岁以下</el-radio>
            <el-radio value="25-30岁" size="large">25-30岁</el-radio>
            <el-radio value="31-40岁" size="large">31-40岁</el-radio>
            <el-radio value="41-50岁" size="large">41-50岁</el-radio>
            <el-radio value="50岁以上" size="large">50岁以上</el-radio>
          </el-radio-group>
        </div>
        <el-divider/>
        <div class="info-row">
          <span class="label">{{ $t('pcenter.accumulate.sexLabel') }}：</span>
          <el-radio-group v-model="infoForm.sex">
            <el-radio value="男" size="large">男</el-radio>
            <el-radio value="女" size="large">女</el-radio>
          </el-radio-group>
        </div>
        <el-divider/>
        <div class="info-row">
          <span class="label">{{ $t('pcenter.accumulate.academicLabel') }}：</span>
          <el-select v-model="infoForm.academic">
            <el-option :label="$t('pcenter.accumulate.academicOptions[0]')" :value="$t('pcenter.accumulate.academicOptions[0]')">
              {{ $t('pcenter.accumulate.academicOptions[0]') }}
            </el-option>
            <el-option :label="$t('pcenter.accumulate.academicOptions[1]')" :value="$t('pcenter.accumulate.academicOptions[1]')">
              {{ $t('pcenter.accumulate.academicOptions[1]') }}
            </el-option>
            <el-option :label="$t('pcenter.accumulate.academicOptions[2]')" :value="$t('pcenter.accumulate.academicOptions[2]')">
              {{ $t('pcenter.accumulate.academicOptions[2]') }}
            </el-option>
            <el-option :label="$t('pcenter.accumulate.academicOptions[3]')" :value="$t('pcenter.accumulate.academicOptions[3]')">
              {{ $t('pcenter.accumulate.academicOptions[3]') }}
            </el-option>
            <el-option :label="$t('pcenter.accumulate.academicOptions[4]')" :value="$t('pcenter.accumulate.academicOptions[4]')">
              {{ $t('pcenter.accumulate.academicOptions[4]') }}
            </el-option>
          </el-select>
        </div>
        <el-divider/>
        <div class="info-row">
          <span class="label">{{ $t('pcenter.accumulate.professionLabel') }}：</span>
          <el-select v-model="infoForm.profession">
            <el-option :value="$t('pcenter.accumulate.professionOptions[0]')" :label="$t('pcenter.accumulate.professionOptions[0]')">
              {{ $t('pcenter.accumulate.professionOptions[0]') }}
            </el-option>
            <el-option :value="$t('pcenter.accumulate.professionOptions[1]')" :label="$t('pcenter.accumulate.professionOptions[1]')">
              {{ $t('pcenter.accumulate.professionOptions[1]') }}
            </el-option>
            <el-option :value="$t('pcenter.accumulate.professionOptions[2]')" :label="$t('pcenter.accumulate.professionOptions[2]')">
              {{ $t('pcenter.accumulate.professionOptions[2]') }}
            </el-option>
            <el-option :value="$t('pcenter.accumulate.professionOptions[3]')" :label="$t('pcenter.accumulate.professionOptions[3]')">
              {{ $t('pcenter.accumulate.professionOptions[3]') }}
            </el-option>
            <el-option :value="$t('pcenter.accumulate.professionOptions[4]')" :label="$t('pcenter.accumulate.professionOptions[4]')">
              {{ $t('pcenter.accumulate.professionOptions[4]') }}
            </el-option>
            <el-option :value="$t('pcenter.accumulate.professionOptions[5]')" :label="$t('pcenter.accumulate.professionOptions[5]')">
              {{ $t('pcenter.accumulate.professionOptions[5]') }}
            </el-option>
            <el-option :value="$t('pcenter.accumulate.professionOptions[6]')" :label="$t('pcenter.accumulate.professionOptions[6]')">
              {{ $t('pcenter.accumulate.professionOptions[6]') }}
            </el-option>
          </el-select>
        </div>
        <el-divider/>
        <div class="info-row">
          <span class="label">{{ $t('pcenter.accumulate.researchPlanLabel') }}：</span>
          <el-select v-model="infoForm.researchPlan" multiple>
            <el-option :value="$t('pcenter.accumulate.researchPlanOptions[0]')" :label="$t('pcenter.accumulate.researchPlanOptions[0]')">
              {{ $t('pcenter.accumulate.researchPlanOptions[0]') }}
            </el-option>
            <el-option :value="$t('pcenter.accumulate.researchPlanOptions[1]')" :label="$t('pcenter.accumulate.researchPlanOptions[1]')">
              {{ $t('pcenter.accumulate.researchPlanOptions[1]') }}
            </el-option>
            <el-option :value="$t('pcenter.accumulate.researchPlanOptions[2]')" :label="$t('pcenter.accumulate.researchPlanOptions[2]')">
              {{ $t('pcenter.accumulate.researchPlanOptions[2]') }}
            </el-option>
          </el-select>
        </div>
        <el-divider/>
        <div class="info-row">
          <span class="label">{{ $t('pcenter.accumulate.subjectLabel') }}：</span>
          <el-cascader v-model="infoForm.subject" :options="subjectOptions"/>
        </div>
        <el-divider/>
        <div class="info-row">
          <span class="label">{{ $t('pcenter.accumulate.researchTopicLabel') }}：</span>
          <el-input v-model="infoForm.researchTopic"
                    :placeholder="$t('pcenter.accumulate.researchTopicPlh')"></el-input>
        </div>
      </el-card>
    </div>
    <div class="user-info-content" v-else>
      <div class="user-avatar-content">
        <div class="avatar-box">
          <div class="avatar" :style="{'background-image': 'url('+userInfo.icon+')'}"></div>
        </div>
        <el-card class="vip-intro-box">
          <div class="vip-title fb">欢迎成为AIspire 会员</div>
          <div class="vip-intro-desc">AIspire 会员可以专项定制化科研热点推送啦！</div>
          <div class="vip-intro-desc">让AI成为你的专属科研信息播报员！</div>
          <div class="vip-intro-desc">科研快人一步！</div>
          <div class="vip-btn-box">
            <el-button type="default" @click="handlePopVipBenefitsModal">查看会员权益</el-button>
            <div class="high-btn">成为会员</div>
          </div>
        </el-card>
      </div>
      <div class="user-detail-content">
        <el-card class="detail-card">
          <template #header>
            <div class="card-header">
              <span>{{ userInfo.nickname }}</span>
              <el-button link type="primary" @click="handleEditPortrait">编辑</el-button>
            </div>
          </template>
          <div class="group-title fb">{{portraitInfo.gender}}</div>
          <div class="list-item">
            <i class="iconfont icon-yuandianxiao"></i>
            <span>来自{{portraitInfo.area}}</span>
          </div>
          <div class="list-item">
            <i class="iconfont icon-yuandianxiao"></i>
            <span>{{portraitInfo.age_group}}</span>
          </div>
          <div class="list-item">
            <i class="iconfont icon-yuandianxiao"></i>
            <span>{{portraitInfo.degree}}</span>
          </div>
          <div class="list-item">
            <i class="iconfont icon-yuandianxiao"></i>
            <span>{{portraitInfo.title}}</span>
          </div>
          <div class="group-title fb">研究兴趣</div>
          <div class="list-item">
            <i class="iconfont icon-yuandianxiao"></i>
            <span>{{portraitInfo.primary_discipline}}/{{portraitInfo.secondary_discipline}}</span>
          </div>
          <div class="list-item">
            <i class="iconfont icon-yuandianxiao"></i>
            <span>{{portraitInfo.research_topic.join('，')}}</span>
          </div>
          <div class="group-title fb">科研计划</div>
          <div class="list-item">
            <i class="iconfont icon-yuandianxiao"></i>
            <span>{{portraitInfo.research_plan.join('，')}}</span>
          </div>
        </el-card>
      </div>
    </div>
  </div>
  <el-dialog
      modal-class="vip-benefits-modal"
      v-model="vipBenefitsDialogVisible"
      title=""
      width="70%">
    <div class="title">
      <span class="fb">一起成为AIspire会员！</span>
      <i class="iconfont icon-vip-crown-fill"></i>
    </div>
    <div class="card-content">
      <el-card class="benefits-card vip-card">
        <div class="card-title fb">会员优享</div>
        <div class="icon-item">
          <div class="icon-box">
            <i class="iconfont icon-wode1"></i>
          </div>
          <div class="text">个性化主题推送</div>
        </div>
        <div class="icon-item">
          <div class="icon-box">
            <i class="iconfont icon-comments"></i>
          </div>
          <div class="text">科研方向挖掘</div>
        </div>
        <div class="icon-item">
          <div class="icon-box">
            <i class="iconfont icon-bianji"></i>
          </div>
          <div class="text">辅助论文写作</div>
        </div>
        <div class="btn-row">
          <div class="high-btn">立即订阅</div>
        </div>
      </el-card>
      <el-card class="benefits-card">
        <div class="card-title fb">普通用户</div>
        <div class="icon-item">
          <div class="icon-box">
            <i class="iconfont icon-fabu"></i>
          </div>
          <div class="text">科研热点追踪</div>
        </div>
        <div class="icon-item">
          <div class="icon-box">
            <i class="iconfont icon-robot-one"></i>
          </div>
          <div class="text">交互式科研探索</div>
        </div>
        <div class="icon-item">
          <div class="icon-box">
            <i class="iconfont icon-bar-chart-o"></i>
          </div>
          <div class="text">科研全生命周期管理</div>
        </div>
      </el-card>
    </div>

    <!--    <template #footer>-->
    <!--      <div class="dialog-footer">-->
    <!--        <el-button type="primary" @click="vipBenefitsDialogVisible = false">确定</el-button>-->
    <!--      </div>-->
    <!--    </template>-->
  </el-dialog>
</template>

<script setup>
import {ref, computed, inject} from 'vue'
import {useI18n} from "vue-i18n";
import api from '../../api/index.js'
import common from "~/common/common.js";

const {t} = useI18n()
const user = common.getLocalUser()
const uid = user.userId
const edit = ref(true)
const provinces = [
  "北京市", "天津市", "河北省", "山西省", "内蒙古自治区",
  "辽宁省", "吉林省", "黑龙江省", "上海市", "江苏省",
  "浙江省", "安徽省", "福建省", "江西省", "山东省",
  "河南省", "湖北省", "湖南省", "广东省", "广西壮族自治区",
  "海南省", "重庆市", "四川省", "贵州省", "云南省",
  "西藏自治区", "陕西省", "甘肃省", "青海省", "宁夏回族自治区",
  "新疆维吾尔自治区"
];
const infoForm = ref({
  from: '',
  age: '',
  sex: '',
  academic: '',
  profession: '',
  researchPlan: [],
  subject: '',
  researchTopic: '',
})
const portraitInfo = ref({
  "area": "",
  "age_group": "",
  "gender": "",
  "degree": "",
  "title": "",
  "research_plan": [],
  "primary_discipline": "",
  "secondary_discipline": "",
  "research_topic": []
})
const saveDisabled = computed(() => {
  return !infoForm.value.from || !infoForm.value.age || !infoForm.value.sex || !infoForm.value.academic || !infoForm.value.profession || !infoForm.value.researchPlan.length || !infoForm.value.subject
})
const subjectOptions = [
  {
    value: t('pcenter.accumulate.subjectOptions[0]'),
    label: t('pcenter.accumulate.subjectOptions[0]'),
    children: [
      {
        value: t('pcenter.accumulate.subjectOptions0Arr[0]'),
        label: t('pcenter.accumulate.subjectOptions0Arr[0]')
      },
      {
        value: t('pcenter.accumulate.subjectOptions0Arr[1]'),
        label: t('pcenter.accumulate.subjectOptions0Arr[1]')
      },
      {
        value: t('pcenter.accumulate.subjectOptions0Arr[2]'),
        label: t('pcenter.accumulate.subjectOptions0Arr[2]')
      },
      {
        value: t('pcenter.accumulate.subjectOptions0Arr[3]'),
        label: t('pcenter.accumulate.subjectOptions0Arr[3]')
      },
      {
        value: t('pcenter.accumulate.subjectOptions0Arr[4]'),
        label: t('pcenter.accumulate.subjectOptions0Arr[4]')
      },
      {
        value: t('pcenter.accumulate.subjectOptions0Arr[5]'),
        label: t('pcenter.accumulate.subjectOptions0Arr[5]')
      },
      {
        value: t('pcenter.accumulate.subjectOptions0Arr[6]'),
        label: t('pcenter.accumulate.subjectOptions0Arr[6]')
      },
      {
        value: t('pcenter.accumulate.subjectOptions0Arr[7]'),
        label: t('pcenter.accumulate.subjectOptions0Arr[7]')
      },
      {
        value: t('pcenter.accumulate.subjectOptions0Arr[8]'),
        label: t('pcenter.accumulate.subjectOptions0Arr[8]')
      },
      {
        value: t('pcenter.accumulate.subjectOptions0Arr[9]'),
        label: t('pcenter.accumulate.subjectOptions0Arr[9]')
      },
      {
        value: t('pcenter.accumulate.subjectOptions0Arr[10]'),
        label: t('pcenter.accumulate.subjectOptions0Arr[10]')
      },
    ]
  },
  {
    value: t('pcenter.accumulate.subjectOptions[1]'),
    label: t('pcenter.accumulate.subjectOptions[1]'),
    children: [
      {
        value: t('pcenter.accumulate.subjectOptions1Arr[0]'),
        label: t('pcenter.accumulate.subjectOptions1Arr[0]')
      },
      {
        value: t('pcenter.accumulate.subjectOptions1Arr[1]'),
        label: t('pcenter.accumulate.subjectOptions1Arr[1]')
      },
      {
        value: t('pcenter.accumulate.subjectOptions1Arr[2]'),
        label: t('pcenter.accumulate.subjectOptions1Arr[2]')
      },
      {
        value: t('pcenter.accumulate.subjectOptions1Arr[3]'),
        label: t('pcenter.accumulate.subjectOptions1Arr[3]')
      },
      {
        value: t('pcenter.accumulate.subjectOptions1Arr[4]'),
        label: t('pcenter.accumulate.subjectOptions1Arr[4]')
      },
      {
        value: t('pcenter.accumulate.subjectOptions1Arr[5]'),
        label: t('pcenter.accumulate.subjectOptions1Arr[5]')
      },
      {
        value: t('pcenter.accumulate.subjectOptions1Arr[6]'),
        label: t('pcenter.accumulate.subjectOptions1Arr[6]')
      },
      {
        value: t('pcenter.accumulate.subjectOptions1Arr[7]'),
        label: t('pcenter.accumulate.subjectOptions1Arr[7]')
      },
      {
        value: t('pcenter.accumulate.subjectOptions1Arr[8]'),
        label: t('pcenter.accumulate.subjectOptions1Arr[8]')
      },
      {
        value: t('pcenter.accumulate.subjectOptions1Arr[9]'),
        label: t('pcenter.accumulate.subjectOptions1Arr[9]')
      },
      {
        value: t('pcenter.accumulate.subjectOptions1Arr[10]'),
        label: t('pcenter.accumulate.subjectOptions1Arr[10]')
      },
      {
        value: t('pcenter.accumulate.subjectOptions1Arr[11]'),
        label: t('pcenter.accumulate.subjectOptions1Arr[11]')
      },
      {
        value: t('pcenter.accumulate.subjectOptions1Arr[12]'),
        label: t('pcenter.accumulate.subjectOptions1Arr[12]')
      },
    ]
  }
]

const vipBenefitsDialogVisible = ref(false)
const handlePopVipBenefitsModal = () => {
  vipBenefitsDialogVisible.value = true
}

const userInfo = inject('userInfo', {})
const saveAccumulateLoading = ref(false)
const getAccumulate = async () => {
  try {
    const res = await api.getPortrait({uid})
    if (res.data) {
      portraitInfo.value = res.data
    }
  } catch(e) {
    console.log(e)
  }
}
const setFormInfo = () => {
  if (portraitInfo.value.area) {
    infoForm.value.from = portraitInfo.value.area
  }
  if (portraitInfo.value.age_group) {
    infoForm.value.age = portraitInfo.value.age_group
  }
  if (portraitInfo.value.gender) {
    infoForm.value.sex = portraitInfo.value.gender
  }
  if (portraitInfo.value.degree) {
    infoForm.value.academic = portraitInfo.value.degree
  }
  if (portraitInfo.value.title) {
    infoForm.value.profession = portraitInfo.value.title
  }
  if (portraitInfo.value.research_plan) {
    infoForm.value.researchPlan = portraitInfo.value.research_plan
  }
  if (portraitInfo.value.primary_discipline && portraitInfo.value.secondary_discipline) {
    infoForm.value.subject = [portraitInfo.value.primary_discipline, portraitInfo.value.secondary_discipline]
  }
  if (portraitInfo.value.research_topic) {
    infoForm.value.researchTopic = portraitInfo.value.research_topic.join(',')
  }
}
const handleCancelEditPortrait = async () => {
  edit.value = false
}
const handleEditPortrait = async () => {
  edit.value = true
  await getAccumulate()
  setFormInfo()
}

const handleSaveAccumulate = () => {
  if (!saveDisabled.value) {
    saveAccumulateLoading.value = true
    api.createPortrait({
      "uid": uid,  // 用户id，数艾缘知自己的账号体系。
      "area": infoForm.value.from,    // 地域
      "age_group": infoForm.value.age,   // 年龄段
      "gender": infoForm.value.sex,  // 性别
      "degree": infoForm.value.academic,  // 学历
      "title": infoForm.value.profession,  // 职位
      "research_plan": infoForm.value.researchPlan,  // 科研计划
      "primary_discipline": infoForm.value.subject[0],  // 一级学科
      "secondary_discipline": infoForm.value.subject[1], // 二级学科
      "research_topic": infoForm.value.researchTopic ? infoForm.value.researchTopic.split(',') : [] // 研究主题
    }).then(res => {
      saveAccumulateLoading.value = false
      if (res.status === 'success') {
        ElMessage.success('保存成功')
        edit.value = false
      } else {
        ElMessage.error('保存失败')
      }
    }).catch(e => {
      ElMessage.error('保存异常')
      saveAccumulateLoading.value = false
    })
  }
}
(async () => {
  await getAccumulate()
  if (portraitInfo.value.area) {
    edit.value = false
  }
})()

</script>

<style scoped lang="scss">
.pcenter-page {
  position: relative;
  height: 100%;
}

.user-info-accumulate {
  position: relative;
  height: 100%;

  .info-row {
    position: relative;
    display: flex;
    align-items: center;

    .label {
      font-size: 1.4rem;
      white-space: nowrap;
      width: 14rem;
      min-width: 14rem;
    }
  }

  .form-card {
    position: relative;
    height: 100%;
  }

  .card-header {
    font-size: 1.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.user-info-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.user-avatar-content {
  position: relative;
  width: 49%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;

  .avatar-box {
    position: relative;
    width: 16rem;
    height: 16rem;
    min-height: 16rem;
    background: #fff;
    border-radius: 16rem;
    cursor: pointer;

    .avatar {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: 16rem;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .avatar-mask {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: 16rem;
      background: rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0;

      .iconfont {
        font-size: 3.0rem;
        color: #fff;
      }
    }

    .file-input {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: 16rem;
      opacity: 0;
      cursor: pointer;
    }

    &:hover {
      .logo-mask {
        opacity: 1;
      }
    }
  }

  .vip-intro-box {
    position: relative;
    width: 35rem;
  }

  .vip-title {
    font-size: 1.8rem;
    margin-bottom: 12px;
    color: var(--ai-color-high);
  }

  .vip-intro-desc {
    font-size: 1.4rem;
    line-height: 28px;
  }

  .vip-btn-box {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;

    .high-btn {
      margin-left: 12px;
    }
  }
}

.user-detail-content {
  position: relative;
  width: 49%;
  height: 100%;

  .card-header {
    font-size: 1.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .group-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
    margin-top: 20px;
  }

  .list-item {
    display: flex;
    align-items: center;
    margin: 10px 0;
    font-size: 1.4rem;

    .iconfont {
      margin-right: 5px;
      color: var(--el-color-primary);
    }
  }
}
</style>
<style lang="scss">
.vip-benefits-modal {
  .title {
    display: flex;
    align-items: center;
    font-size: 2.4rem;
    justify-content: center;

    .iconfont {
      color: var(--el-color-warning);
      font-size: 2.6rem;
    }
  }

  .card-content {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
  }

  .benefits-card {
    width: 40%;

    .card-title {
      font-size: 2.6rem;
      font-style: italic;
      margin-bottom: 30px;
    }

    .icon-item {
      display: flex;
      align-items: center;
      font-size: 1.6rem;

      .icon-box {
        width: 3.6rem;
        height: 3.6rem;
        line-height: 3.6rem;
        border-radius: 3.6rem;
        background: #fff;
        text-align: center;
      }

      .iconfont {
        font-size: 2.0rem;
      }
    }

    .btn-row {
      text-align: right;
      margin-top: 20px;
    }
  }

  .vip-card {
    color: var(--ai-color-high);
  }
}
</style>
